<template>
	<view class="page">
		<view class="mainBody">
			<view class="header">
				<image class="logoSrc" src="@/static/logos.jpg"
					style="width: 100rpx;height: 100rpx; border-radius: 50%;">
				</image>
				<view class="mainTit" style="font-weight: bold;">找回密码</view>
			</view>
			<view class="formItem">
				<view class="area">+86</view>
				<input maxlength="11" type="number" class="input phone" name="phone" :placeholder="'请输入手机号'"
					v-model="phone">
			</view>
			<view class="formItem">
				<input type="text" class="input" name="code" :placeholder="'请输入验证码'" v-model="code">
				<view class="sendCode btn-color" style="color: #fd8a1c;" v-if="showTime">{{time}}s{{'后重新获取'}}</view>
				<view class="sendCode btn-color" style="color: #fd8a1c;" @click="getCode()" hover-class="text-hover"
					v-else>{{'获取验证码'}}
				</view>
			</view>
			<view class="formItem">
				<input type="password" class="input" name="phone" :placeholder="'请输入新密码'" v-model="password">
			</view>



			<u-button style="margin-top: 60rpx;background: linear-gradient(180deg, #FD8E1A 0%, #FF7826 100%);"
				type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false" shape="circle"
				class="u-m-t-50" mode="dark" @click="login" :disabled="!isFinishInput">找回密码</u-button>
			<!-- <view class="u-flex u-row-between u-m-t-30">
				<view @click="$u.route('/pages/register/register')" hover-class="text-hover" :style="{color:'#ccc'}">
					新用户注册</view> 
			</view> -->
		</view>


		<!-- <thirdLogin></thirdLogin> -->

	</view>
</template>
<script>
	// import agreement from '@/pagesB/components/agreement';
	// import thirdLogin from '@/pagesB/components/thirdLogin';

	// import {
	// 	get_shop_infoApi,
	// 	registerApi,
	// 	sendApi,
	// 	zhaohuimimaApi
	// } from '../../../api/api';

	export default {
		components: {
			// agreement,
			// thirdLogin
		},
		data() {
			return {
				isClick: true, //避免用户重复点击
				timer: null, //定时器
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				checkboxValue: [1],
				uForm: {
					phone: '',
					password: ''
				},
				isFinishInput: true,
				AppName: '',
				errorType: ['none'],
				rules: {
					phone: [{
							required: true,
							message: '请输入账号',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		// this.$u.test.mobile()就是返回true或者false的
						// 		return this.$u.test.mobile(value);
						// 	},
						// 	message: '手机号码不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['blur'],
						// }
					],
					password: [{
						min: 6,
						message: '请输入不小于6位数的密码',
					}, ]
				},
				account: '',
				phone: '',
				password: '',
				code: '', //验证码		            providerList: [],
				isWechatShow: false,
				devicetoken: '',
				appInfo: {},
				logoSrc: '',
				agreement: true, //是否同意协议
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			uForm: {
				handler(val) {
					if (val.phone && val.password) {
						this.isFinishInput = true
					} else {
						this.isFinishInput = false
					}
				},
				deep: true
			}

		},
		onLoad(option) {
			// this.AppName = this.$AppName
			// this.logoSrc = this.STATICURL + 'images/logo/logoWoshop300.png'
			// const getPhone = uni.getStorageSync('phone');
			// if (getPhone) {
			// 	this.$set(this.uForm, 'phone', getPhone)
			// }
			// // #ifdef APP-PLUS
			// this.getCid();
			// // #endif
			// this.appInfo = uni.getSystemInfoSync();

		},

		methods: {
			// 获取验证码
			getCode() {
				if (this.isClick) {
					if (this.phone.length != 11) {
						return this.$msg('手机格式不正确')
					}
					uni.showLoading()
					this.$api.sendApi({
						phone: this.phone
					}).then((res) => {
						uni.showLoading()
						if (res.code == 1) {
							this.showTime = true;
							this.$msg(res.info)
							this.timer = setInterval(() => {
								this.isClick = false;
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.isClick = true;
									this.time = 60;
									this.showTime = false;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					})
				}
			},
			changeAgree(e) {
				this.agreement = e;
			},
			getCid() {
				//从缓存中取cid值，如果取到就不调取接口获取

				// var info = plus.push.getClientInfo();

				// var cid = info.clientid;

				// var token = info.token;

				// if (cid && token) {
				// 	uni.setStorageSync("devicetoken", cid);
				// 	this.devicetoken = uni.getStorageSync("devicetoken");
				// }


			},
			// 登录
			login(e) {
				// if (uni.$u.test.isEmpty(this.account)) return this.$toast('请输入账号')
				if (uni.$u.test.isEmpty(this.phone)) return this.$msg('请输入手机号')
				if (!uni.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.code)) return this.$msg('请输入验证码')
				if (uni.$u.test.isEmpty(this.password)) return this.$msg('请输入新密码')
				this.$api.zhaohuimimaApi({
					// account: this.account,
					phone: this.phone,
					// phone: this.phone,
					repassword: this.password,
					code: this.code,
				}).then((res) => {
					this.$msg(res.info)
					setTimeout(() => {
						uni.navigateBack()
					}, 500);
				})

			},
			// 获取手机信息

			navigateTo(url, data) {
				this.$navigateTo(url)
			}
			 

		}
	}
</script>

<style lang="scss" scoped>
	// @import "~uview-ui/index.scss";
	page {
		background: #ffffff;
	}

	.page {
		background: #ffffff;
		height: 100%;
	}

	.mainBody {
		padding: 200rpx 80rpx;

		.header {
			text-align: left;
			margin-bottom: 34rpx;
			margin-top: 100rpx;

			.logoSrc {
				width: 110rpx;
				height: 110rpx;
				border-radius: 200px;
				position: relative;
				box-shadow: 0 0 0 6rpx #FD8E1A88, 0 0 0 14rpx #FF782633;
			}

			.mainTit {
				font-size: 48rpx;
				color: #333333;
				margin: 20rpx 0;
			}

			.subTit {
				font-size: 28rpx;
				color: #666;
				font-weight: 200;
			}
		}
	}

	.logoSrc {
		width: 110rpx;
		height: 110rpx;
		border-radius: 200px;
		position: relative;
		// box-shadow: 0 0 0 6rpx #ffd0d0, 0 0 0 14rpx #ffefef;
		box-shadow: 0 0 0 6rpx #FD8E1A88, 0 0 0 14rpx #FF782633;
	}


	.formItem {
		height: 104rpx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		align-items: center;

		.area {
			font-size: 30rpx;
			color: #333;
			padding-right: 34rpx;
			line-height: 1;
			border-right: 1rpx solid #9B9B9B;
		}

		.sendCode {
			background-color: transparent;
			color: #EC4849;
		}

		input {
			flex: 1;
			font-size: 30rpx;
			font-weight: 400;

			&.phone {
				padding-left: 33rpx;
			}

			&::-webkit-input-placeholder {
				color: rgba(204, 204, 204, 1);
			}
		}
	}
</style>